<template>
  <a-layout id="studyView">
    <!-- header 部分，引入轮播图组件 -->
    <a-layout-header>
      <a-carousel
          :style="{width: '100%',height: '480px'}"
          :default-current="2"
          :auto-play="true"
      >
        <a-carousel-item v-for="image in images" :key="image">
          <img
              :src="image"
              :style="{width: '100%',}"
              alt="这是个图片"
          />
        </a-carousel-item>
      </a-carousel>
    </a-layout-header>
    <!-- content 部分 -->
    <a-layout-content>
      <a-row>
        <a-col>
          <h2 id="basic-learning" class="title">基础学习</h2>
        </a-col>
      </a-row>
      <a-row :gutter="24">
        <a-col :span="6">
          <a-card hoverable class="bookCard">
            <template #cover>
              <a-image
                  src="https://stone-answer-bucket-1328818493.cos.ap-chengdu.myqcloud.com/book_icon/826546_1585563045511_5409C304FB9CF4DA37FCE1D446239ABE.jpg"
                  description="Java入门到精通"
                  :preview="false"
              >
              </a-image>
            </template>
          </a-card>
        </a-col>
      </a-row>

    </a-layout-content>
  </a-layout>
</template>

<script setup>
const images = [
  'https://p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/cd7a1aaea8e1c5e3d26fe2591e561798.png~tplv-uwbnlip3yd-webp.webp',
  'https://p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/6480dbc69be1b5de95010289787d64f1.png~tplv-uwbnlip3yd-webp.webp',
  'https://p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/0265a04fddbd77a19602a15d9d55d797.png~tplv-uwbnlip3yd-webp.webp',
];
// 这里可以添加组件的逻辑代码，如果有需要的话
</script>

<style scoped>

.title {
  background-color: #F7F8F9;
  text-align: center;
  width: 100%;
  height: 50px;
  line-height: 50px;
}

.bookCard{
  width: 260px;
  height: 354px;
}
</style>